import './index.css';
import './bill.less';
import { Layout, Breadcrumb, DatePicker, Space, Table, Pagination } from 'antd';
import billStore from '../../store/billSrc';
import { observer } from 'mobx-react';


const { Content} = Layout;
function onChange(date, dateString) {
    console.log(date, dateString);
}
// 分页布局
function itemRender(current, type, originalElement) {
    if (type === 'prev') {
        return <a>上一页</a>;
    }
    if (type === 'next') {
        return <a>下一页</a>;
    }
    return originalElement;
}
function Bill(props) {
    billStore.setPathName(props.location.pathname);
    // 表格布局
    const data = [
        {
            key: '1',
            name: 'John Brown',
            age: 32,
            address: 'New York No. 1 Lake Park',
        },
        {
            key: '2',
            name: 'Jim Green',
            age: 42,
            address: 'London No. 1 Lake Park',
        },
        {
            key: '3',
            name: 'Joe Black',
            age: 32,
            address: 'Sidney No. 1 Lake Park',
        },
    ];
    const columns = [
        {
            title: '时间',
            width: 100,
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '收入（元）',
            width: 100,
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '支出（元）',
            dataIndex: 'address',
            key: '1',
            width: 150,
        },
        {
            title: '余额（元）',
            dataIndex: 'address',
            key: '2',
            width: 150,
        },
        // {
        //     title: '操作',
        //     key: 'operation',
        //     width: 100,
        //     render: () => <a>查看</a>,
        // },
    ];

    const [tableList, setTableList] = useState([]);
    function getList(){
        http({
            url:'/bill/plat',
        }).then(res => {
            res.data&&res.data.forEach(v =>{
                v.dealStyle = v.dealStyle?'收入':'支出'
            })
            setTableList(res.data);
        })
    }
    useEffect(() => {
        getList();
    }, [])
    
    return <div className='billManege'>
        <p className="breadCss">对账单</p>
        <Breadcrumb className="breadCss2">
            <Breadcrumb.Item>对账单管理</Breadcrumb.Item>
            <Breadcrumb.Item>对账单</Breadcrumb.Item>
        </Breadcrumb>
        <Content
            className="site-layout-background bC_css"

        >
            <div className="bC_nav1">
                <span className="bC_nav_p1">平台余额</span>
                <span className="bC_nav_p2">256</span>
            </div>
            <div className="bC_nav1">
                <span className="bC_nav_p1">待结算金额</span>
                <span className="bC_nav_p2">6</span>
            </div>
            <div className="bC_nav1">
                <span className="bC_nav_p1">平台收益</span>
                <span className="bC_nav_p2">2560</span>
            </div>
        </Content>
        <Content
            className="site-layout-background bC_css2 "

        >
            <h3>对账单</h3>
            <div className="bC_nav2">
                <span className="bC_nav2_p1">时间</span>
                <Space className="bC_nav2_p2">
                    <DatePicker onChange={onChange} placeholder="请选择日期" />
                </Space>
            </div>
            <div className="bC_nav2_2">
                <Table
                    columns={columns}
                    dataSource={tableList}
                    size="middle"
                    className="tableCss"
                    pagination={false}

                />
            </div>
            <div className="pageCss">
                <>
                    <Pagination
                        showSizeChanger
                        showTotal={total => ` ${total}条记录`}
                        total={15}
                        size="small"
                        // showQuickJumper
                        itemRender={itemRender} 
                    />
                </>,
            </div>
        </Content>
    </div>
}
export default observer(Bill);